<!--
 * @Description: 可编辑div
 * @Author: liyujie
 * @Date: 2021/10/28
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/10/28
-->
<template>
    <div
        class="zd-div-edit el-input"
        :class="`el-input--${size}`"
    >
        <div
            v-html="value"
            class="el-input__inner"
            :style="{minHeight: size === 'medium' ? '36px' : '32px'}"
            contenteditable="plaintext-only"
            :placeholder="placeholder"
            @input="changeDivText($event)"
            @focus="divFocus"
            @blur="divBlur"
            @keydown.enter.prevent
        >
            {{ value }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'ZdDivEdit',
    data() {
        return {
            editText: ""
        };
    },
    props: {
        value: {
            type: String,
            default: ""
        },
        size: {
            type: String,
            default: 'medium'
        },
        placeholder: {
            type: String,
            default: ''
        },
    },
    created() {
        this.editText = this.value;
    },
    methods: {
        // 文本改变时事件
        changeDivText(event) {
            this.editText = event.target.innerText;
        },
        divFocus() {
            this.editText = this.value;
        },
        divBlur() {
            this.$emit("input", this.editText);
        }
    }
};
</script>

<style scoped lang="less">
.el-input {
    .el-input__inner {
        height: auto!important;
        line-height: 20px;
        display: flex;
        align-items: center;
        padding: 6px 15px;
        word-break: break-all;
        -webkit-user-modify: read-write-plaintext-only;
    }
}

.el-input__inner[contenteditable]:empty:before{
    content: attr(placeholder);
    color: #b2b2b2;
}
.el-input__inner[contenteditable]:focus{
    content:none;
}
</style>
